const path = require('path')
const webpack = require('webpack')

//vue-loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

//自动在内存中根据指定页面生成一个内存的页面
//自动把打包好的 bundle.js 追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: path.join(__dirname, './src/main.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  devServer: {
    open: true,
    port: 3000,
    contentBase: 'src',
    hot: true
  },
  plugins: [//所有webpack 插件的配置节点
    new webpack.HotModuleReplacementPlugin(),
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'),
      filename: 'index.html'
    }),
    new VueLoaderPlugin()
  ],
  module: {//配置第三方loader 模块
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理 css 文件的loader
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },//处理 less 文件的loader
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },//处理 scss 文件的loader
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' },//处理图片路径的 loader
      //limit 给定的值，是图片的大小，单位是byte 如果我们引用的图片，大于或等于给定的limit值，则不会被转为base64格式的字符串，如果图片小于给定的 limit 的值，则会被转为base64的字符串
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },//处理字体文件的 loader
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },//配置Babel 来转换高级的ES6语法
      { test: /\.vue$/, use: 'vue-loader' }//处理 .vue 文件的loader
    ]
  },
  resolve: {
    alias: {//修改 vue 被导入时候的包的路径
      //"vue$":"vue/dist/vue.js"
    }
  }
}